<template>
  <view class="mine">
    <view class="w-f h-380 top-box">
      <image
          :src="getBaseUrl() + '/admin-api/system/file/19/get/7a4671e414f36cc6bfcc90b651dad724ea1d375a8a1cbc8bccc4debb192b8df1.png'"
          class="w-f h-380"
      ></image>
      <view class="top-content w-f h-380">
        <view :style="{ paddingTop: statusBarHeight + 'px' }" class="w-f f jc-f-e p-32">
          <image src="http://cwht.ricecs.cn/app/mine/menu.png" class="w-32 h-32 mt-24 mp-weixin" @click="handleMenu"
                 style="margin-right:200rpx"></image>
        </view>
        <view class="f ai-c jc-s-b pl-32 mt-60">
          <view class="f ai-c">
            <image :src="userInfo.avatar" class="w-94 h-94 b-94 ava mr-28"></image>
            <view>
              <view class="fs-36 fw-600 text-color1">{{
                  userInfo.nickname ? userInfo.nickname : userInfo.mobile
                }}
              </view>
              <view class="fs-28 text-color2">ID：{{ userInfo.id }}</view>
            </view>
          </view>
          <view class="f ai-c jc-c w-176 h-56 person" @click="toPersonal">
            <view class="mr-8 fs-26 text-color5">个人主页</view>
            <u-icon name="arrow-right" color="#ffffff" size="12"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <image src="http://cwht.ricecs.cn/app/mine/head.png" class="w-f h-28 head"></image>
    <view class="content">
      <view class="f pt-16 num ph-24">
        <view class="num-box f fd-c ai-c" @click="toIntegral">
          <view class="fs-36 fw-600 text-color4 h-50 f ai-c">{{ userInfo.point }}</view>
          <view class="fs-24 text-color4 mt-4">积分</view>
        </view>
        <view class="num-box f fd-c ai-c" @click='toCoupon'>
          <view class="fs-36 fw-600 text-color4 h-50 f ai-c">{{ UnusedCount }}</view>
          <view class="fs-24 text-color4 mt-4">优惠券</view>
        </view>
        <view class="num-box f fd-c ai-c">
          <view class="fs-36 fw-600 text-color4 h-50 f ai-c">{{ fenList.likedCount }}</view>
          <view class="fs-24 text-color4 mt-4">点赞</view>
        </view>
        <view class="num-box f fd-c ai-c" @click="toMyFollowing">
          <view class="fs-36 fw-600 text-color4 h-50 f ai-c">{{ fenList.followCount }}</view>
          <view class="fs-24 text-color4 mt-4">关注</view>
        </view>
        <view class="num-box f fd-c ai-c" @click="toMyFans">
          <view class="fs-36 fw-600 text-color4 h-50 f ai-c">{{ fenList.fansCount }}</view>
          <view class="fs-24 text-color4 mt-4">粉丝</view>
        </view>
      </view>
      <view class="ph-24 mt-32">
        <!-- 订单 -->
        <view class="h-234 b-24 background-white ph-28 pt-32">
          <view class="f ai-c jc-s-b">
            <view class="fs-36 fw-600 text-color1">我的订单</view>
            <view class="f ai-c" @click="toOrder">
              <view class="fs-28 text-color2 mr-8">查看全部订单</view>
              <view class="jt">
                <u-icon name="arrow-right" color="#999999" size="12"></u-icon>
              </view>
            </view>
          </view>
          <view class="f mt-32">
            <view class="box f fd-c ai-c" @click="toShopCart">
              <image src="http://cwht.ricecs.cn/app/mine/cart.png" class="w-44 h-44"></image>
              <view class="fs-24 text-color4 mt-20">购物车</view>
            </view>
            <view class="box f fd-c ai-c" @click="toOrder(1)">
              <image src="http://cwht.ricecs.cn/app/mine/dfk.png" class="w-44 h-44"></image>
              <view class="fs-24 text-color4 mt-20">待付款</view>
            </view>
            <view class="box f fd-c ai-c" @click="toOrder(2)">
              <image src="http://cwht.ricecs.cn/app/mine/dsh.png" class="w-44 h-44"></image>
              <view class="fs-24 text-color4 mt-20">待收货</view>
            </view>
            <view class="box f fd-c ai-c" @click="toOrder(3)">
              <image src="http://cwht.ricecs.cn/app/mine/dpj.png" class="w-44 h-44"></image>
              <view class="fs-24 text-color4 mt-20">待评价</view>
            </view>
            <view class="box f fd-c ai-c" @click="toOrder(5)">
              <image src="http://cwht.ricecs.cn/app/mine/sh.png" class="w-44 h-44"></image>
              <view class="fs-24 text-color4 mt-20">售后</view>
            </view>
          </view>
        </view>
        <!-- 我的宠物 -->
        <view class="b-24 background-white mt-20 pt-32">
          <view class="f ai-c jc-s-b ph-28">
            <view class="fs-36 fw-600 text-color1">我的宠物</view>
            <view class="f ai-c" @click="toMyPet">
              <view class="fs-28 text-color2 mr-8">查看全部宠物</view>
              <view class="jt">
                <u-icon name="arrow-right" color="#999999" size="12"></u-icon>
              </view>
            </view>
          </view>
          <view class="pl-28 mt-32">
            <u-scroll-list :indicator="false">
              <view class="w-240 h-337 ph-20 pv-20 mr-16 pet b-12" v-for="(item, index) in petList" :key="index"
                    @click='toPet(item.id,index)'>
                <image :src="item.avatar" class="w-200 h-200 b-12"></image>
                <view class="fs-28 fw-600 text-color1 text-ellipsis-1 mt-20">{{ item.name }}</view>
                <view class="fs-24 text-color3 text-ellipsis-1 mt-4"> {{
                    item.secondCategoryName
                  }}/{{ item.gender == 1 ? 'GG' : 'MM' }}
                </view>
              </view>
            </u-scroll-list>
          </view>
        </view>
        <!-- 我的医疗 -->
        <view class="b-24 background-white mt-20 pv-32 ph-28">
          <view class="fs-36 fw-600 text-color1">我的医疗</view>
          <view class="f mt-40">
            <view class="box f fd-c ai-c" @click="toMyConsultation">
              <image src="http://cwht.ricecs.cn/app/mine/mywz.png" class="w-44 h-44"></image>
              <view class="fs-22 text-color4 mt-16">我的问诊</view>
            </view>
            <view class="box f fd-c ai-c" @click="toMyDoctor">
              <image src="http://cwht.ricecs.cn/app/mine/myys.png" class="w-44 h-44"></image>
              <view class="fs-22 text-color4 mt-16">我的医生</view>
            </view>
            <view class="box f fd-c ai-c" @click="toText(12)">
              <image src="http://cwht.ricecs.cn/app/mine/mybd.png" class="w-44 h-44"></image>
              <view class="fs-22 text-color4 mt-16">我的保单</view>
            </view>
            <view class="box f fd-c ai-c" @click="zan">
              <image src="http://cwht.ricecs.cn/app/mine/mytj.png" class="w-44 h-44"></image>
              <view class="fs-22 text-color4 mt-16">我的体检</view>
            </view>
            <view class="box f fd-c ai-c" @click="zan">
              <image src="http://cwht.ricecs.cn/app/mine/myfw.png" class="w-44 h-44"></image>
              <view class="fs-22 text-color4 mt-16">我的服务</view>
            </view>
          </view>
        </view>
        <!-- 工具与服务 -->
        <view class="b-24 background-white mt-20 pv-32 ph-28">
          <view class="fs-36 fw-600 text-color1">工具与服务</view>
          <view class="f mt-8 fc-w">
            <button class="box f fd-c ai-c " open-type="contact" plain style="border: none;margin: 0;padding: 0;width: 20% !important;">
              <view class="mt-32">

                <image src="http://cwht.ricecs.cn/app/mine/zxkf.png" class="w-40 h-40"></image>
                <view class="fs-22 text-color4 mt-6" style="font-weight: 400;">在线客服</view>

              </view>
            </button>
            <view class="box f fd-c ai-c mt-32" @click="zan">
              <image src="http://cwht.ricecs.cn/app/mine/mcly.png" class="w-40 h-40"></image>
              <view class="fs-22 text-color4 mt-16">萌宠乐园</view>
            </view>
            <view class="box f fd-c ai-c mt-32" @click="toText(10)">
              <image src="http://cwht.ricecs.cn/app/mine/gzbl.png" class="w-40 h-40"></image>
              <view class="fs-22 text-color4 mt-16">狗证办理</view>
            </view>
            <view class="box f fd-c ai-c mt-32" @click="toSM">
              <image src="http://cwht.ricecs.cn/app/mine/smrz.png" class="w-40 h-40"></image>
              <view class="fs-22 text-color4 mt-16">实名认证</view>
            </view>
            <view class="box f fd-c ai-c mt-32" @click="toText(11)">
              <image src="http://cwht.ricecs.cn/app/mine/gyhd.png" class="w-40 h-40"></image>
              <view class="fs-22 text-color4 mt-16">公益活动</view>
            </view>
            <view class="box f fd-c ai-c mt-32" @click="toIntegral">
              <image src="http://cwht.ricecs.cn/app/mine/jfdh.png" class="w-40 h-40"></image>
              <view class="fs-22 text-color4 mt-16">积分明细</view>
            </view>
            <view class="box f fd-c ai-c mt-32" @click="toDoctorSettled">
              <image src="http://cwht.ricecs.cn/app/mine/cwcy.png" class="w-40 h-40"></image>
              <view class="fs-22 text-color4 mt-16">成为宠医</view>
            </view>
            <view class="box f fd-c ai-c mt-32" @click="toSettled">
              <image src="http://cwht.ricecs.cn/app/mine/sjrz.png" class="w-40 h-40"></image>
              <view class="fs-22 text-color4 mt-16">商家入驻</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <Menu ref="menu"/>
    <!-- tab -->
   <!-- <Tabbar tab="4"/> -->
  </view>
</template>
<script setup lang="ts">
import {ref} from 'vue';
import {onShow} from '@dcloudio/uni-app';
import {walletGet, myFenCount, getUnusedCount} from '@/services/api/mine/index';
import {mypetProfile} from '@/services/api/pet';
import Menu from './Menu.vue';
import {useAuthStore} from '@/store/modules/auth';
import {getBaseUrl} from '@/utils/env';

const authStore = useAuthStore();
const menu = ref();
const UnusedCount = ref(0);
const petList = ref<any[]>([]);
const fenList = ref<any[]>([]);
//用户信息
const userInfo = ref();
onShow(async () => {
  await authStore.getUserInfos();
  userInfo.value = authStore.getUserInfo;
  userInfo.value.id = authStore.getUserId;
  getWalletGet();
  getPet();
  getUnused();
});

//购物车
function toShopCart() {
  uni.navigateTo({
    url: '/pages_shop/shopCart/index',
  });
}

//用户钱包
async function getWalletGet() {

  const {data} = await myFenCount({userId: userInfo.value.id});

  fenList.value = data
  await walletGet({});
}

function toSM(){
	if(userInfo.value.realNameAuthStatus!=1){
		uni.showToast({
			icon:'none',
			title:'已完成实名认证'
		})
	}else{
		uni.navigateTo({
		  url: '/pages_mine/realName',
		});
	}
	
}

//用户钱包
async function getUnused() {

  const {data} = await getUnusedCount({});
  UnusedCount.value = data
  await walletGet({});
}

//获取宠物
async function getPet() {
  const {data} = await mypetProfile({});
  petList.value = data;
}

//我的粉丝
function zan() {
  uni.showToast({
    icon: 'none',
    title: '暂不开放',
  });
}

//我的粉丝
function toPet(id: number, index: number) {
  uni.navigateTo({
    url: '/pages_mine/myPet?pet_id=' + id + '&index=' + index
  });
}

//我的粉丝
function toMyFans() {
  uni.navigateTo({
    url: '/pages_mine/myFans',
  });
}

//我的关注
function toMyFollowing() {
  uni.navigateTo({
    url: '/pages_mine/myFollowing',
  });
}

//富文本
function toText(type: number) {
  uni.navigateTo({
    url: '/pages_mine/text?type=' + type,
  });
}

//优惠卷
function toCoupon() {
  uni.navigateTo({
    url: '/pages_mine/myCoupon',
  });
}

//积分明细
function toIntegral() {
  uni.navigateTo({
    url: '/pages_mine/integral',
  });
}

//个人主页
function toPersonal() {
  uni.navigateTo({
    url: '/pages_mine/personal',
  });
}

//成为宠医
function toDoctorSettled() {
  uni.navigateTo({
    url: '/pages_mine/doctorSettled/index',
  });
}

//商家入驻
function toSettled() {
  uni.navigateTo({
    url: '/pages_mine/settled/index',
  });
}

//显示菜单
function handleMenu() {
  menu.value.getShow();
}

function toMyPet() {
  uni.navigateTo({
    url: '/pages_mine/myPet',
  });
}

function toOrder(status: number) {
  uni.navigateTo({
    url: '/pages_mine/order?status=' + status,
  });
}

//我的医生
function toMyDoctor() {
  uni.navigateTo({
    url: '/pages_mine/myDoctor',
  });
}

//我的问诊
function toMyConsultation() {
  uni.navigateTo({
    url: '/pages_mine/myConsultation',
  });
}

//头部
const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;
</script>
<style lang="scss" scoped>
.mine {
  background: #f5f5f5;
  min-height: 100vh;

  .pet {
    background: #f8f8f8 ;
  }

  .box {
    width: 20%;
  }

  .jt {
    top: 2rpx;
    position: relative;
  }

  .background-white {
    background: #fff;
  }

  .content {
    position: relative;
    top: -38rpx;

    .num {
      background-image: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
    }

    .num-box {
      width: 20%;
    }
  }

  .head {
    position: relative;
    top: -28rpx;
  }

  .top-box {
    position: relative;

    .person {
      background: #fabb3c;
      border-radius: 28rpx 0 0 28rpx;
    }

    .ava {
      border: 3rpx solid #ffffff;
    }

    .top-content {
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
</style>
